<template>
    <div class="center">
            <div class="head">
                <p>我的购物车</p>
            </div>
            <div class="title">
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>选择</th>
                            <th>商品</th>
                            <th>价格</th>
                            <th>小计</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- <tr v-for="item of movies" :key="item.id"> -->
                        <tr>
                            <td>
                                <el-checkbox :label="city"></el-checkbox>
                            </td>
                            <!-- <td><img :src="item.pic" alt=""></td> -->
                            <td>
                                <img class="goods-img" src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2629413230.webp" alt="">
                                <span>衣服</span>
                            </td>
                            <td>
                                <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
                            </td>
                            <td>
                                2200
                            </td>
                            <td>
                            <el-button type="danger" @click="handleDelete(item._id)" class="btn">删除</el-button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="fixed-down">
                <el-checkbox class="allcheck" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <div class="down-right">
                    <div class="total">合计 ：￥<span>30.50</span></div>
                    <el-button type="danger" class="submit-btn">提交订单</el-button>
                </div>
            </div>
    

    
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
    </el-checkbox-group>
    </div>
</template>
<script>
  const cityOptions = ['上海', '北京', '广州', '深圳'];
  export default {
    data() {
      return {
        num:1,
        checkAll: false,
        checkedCities: ['上海', '北京'],
        cities: cityOptions,
        // isIndeterminate: true
      };
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        // this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    }
  };
</script>

<style scoped>
.center{
  width: 100%;
  margin: 0 auto;
  background-color: #eee;
}
.head{
  width: 150px;
  height: 60px;
  margin: 0 auto;
  line-height: 60px;
  text-align: center;
}
.title,table{
    width: 100%;
    background-color: aqua;
}
thead{
    background-color: rgb(51, 51, 51);
    color: #eee;
}
thead tr{
    height: 45px;
}
tbody tr{
    height: 120px;
    background-color: #fff;
    text-align: center;
}
.goods-img{
    width: 80px;
    height: 100px;
}

.fixed-down{
    width: 100%;
    height: 60px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
}
.allcheck{
    line-height: 60px;
    height: 60px;
    color: #333;
}
.down-right{
    display: flex;
    height: 60px;
    line-height: 60px;
    color: red;
}
.total{
    margin-right: 20px;
}
.submit-btn{
    height: 60px;
    
}
</style>